<template>
	<view>
		<u-popup :show="popuo_show" round="20rpx" @close="onClose()" mode="bottom" bgColor="#ffffff">
			<view class="select-wrap">
				<view class="title-line">
					<text class="title">上传费用凭证</text>
					<image src="@/static/images/close.png" class="close-ioc" @click="onClose()"></image>
				</view>
				<view class="form-view" @click="onChooseImage()">
					<image :src="getImageSrc(image)" mode="aspectFill" class="img" v-if="image"></image>
					<image src="@/static/images/upload.png" mode="aspectFill" class="img" v-else></image>
				</view>
				<view class="btn-view">
					<button class="btn" @click="onSubmit()">提 交</button>
				</view>
			</view>
			<i-toast ref="iToast"></i-toast>
			<u-toast ref="uToast"></u-toast>
		</u-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				popuo_show: false,
				id: null,
				image: ""


			};
		},
		methods: {
			show(id) {
				this.id = id
				this.image = ""
				this.popuo_show = true;
			},

			onChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						const path = res.tempFilePaths[0]
						const { url } = await this.uploadFile(path)
						this.image = url
					}
				});

			},


			onComChange(e) {
				const active = this.com_list[e.detail.value]
				this.com_name = active.name
				this.com_id = active.id

			},
			onClose() {
				this.popuo_show = false;
				this.$emit("close");
			},

			onSubmit() {
				if (!this.image) return this.fail("请上传费用凭证")

				const params = {
					type: 2, //1上传物流单号 2上传费用凭证
					id: this.id,
					voucher: this.image,
				}
				this.api.post("/api/work/worUserShipper", { params: params }).then(res => {
					this.$refs.iToast.show("提交成功")
					setTimeout(() => {
						uni.$emit("order-get-data")
						this.$emit("success")
						this.onClose()
						this.goBack()
					}, 800)
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	.select-wrap {
		display: flex;
		flex-direction: column;

		.title-line {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;
			border-bottom: 1px solid #E5E5E5;

			.title {
				font-size: 32rpx;
				color: #333333;
			}

			.close-ioc {
				position: absolute;
				right: 30rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.form-view {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 40rpx;
		margin-top: 10rpx;

		.img {
			width: 214rpx;
			height: 232rpx;
			border-radius: 12rpx;
			margin: auto;
		}



	}

	.btn-view {
		padding: 30rpx 30rpx;
	}
</style>